<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> SmartAdmin </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/font-awesome.min.css">
		
		<!-- SmartAdmin Styles : Caution! DO NOT change the order -->		
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-production.min.css">
		
		<link href="${base}/ui/css/admin/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="${base}/ui/css/css3/animate.css" rel="stylesheet" type="text/css" />
		<link href="${base}/ui/css/fonts.css" rel="stylesheet" type="text/css" />
		<link href="${base}/ui/css/icons.css" rel="stylesheet" type="text/css" />
		<link href="${base}/ui/css/admin/style.css" rel="stylesheet" type="text/css" />
		<link href="${base}/ui/css/admin/jquery.dataTables.css" rel="stylesheet" type="text/css" />

		<!-- FAVICONS -->
		<link rel="shortcut icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">

		<!-- GOOGLE FONT -->
		<link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:400italic,700italic,300,400,700">

		<!-- Specifying a Webpage Icon for Web Clip 
			 Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
		<link rel="apple-touch-icon" href="${base}/img/splash/sptouch-icon-iphone.png">
		<link rel="apple-touch-icon" sizes="76x76" href="${base}/img/splash/touch-icon-ipad.png">
		<link rel="apple-touch-icon" sizes="120x120" href="${base}/img/splash/touch-icon-iphone-retina.png">
		<link rel="apple-touch-icon" sizes="152x152" href="${base}/img/splash/touch-icon-ipad-retina.png">
		
		<!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<!-- Startup image for web apps -->
		<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
		<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
		<link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">

	</head>
<body>
	<!-- head star -->
	<div class="tnav row wrapper border-bottom white-bg page-heading">
		<!--<div class="col-sm-4">
           <h2 class="fl">项目</h2>
           <ol class="breadcrumb fl">
	           <li><a href="index.html">主页</a></li>
	           <li><strong>项目</strong></li>
            </ol>
        </div>-->
		<!-- RIBBON -->
		<div id="ribbon">			
			<!-- breadcrumb -->
			<ol class="breadcrumb">
				<li>商品管理</li><li>商品列表</li>
			</ol>
			<!-- end breadcrumb -->
		</div>
		<!-- END RIBBON -->
	</div>
	<!-- head end -->	
	
	<!-- table star -->
	<div class="row col-lg-12">
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="ibox">
				<div class="ibox-title">
                    <div class="ibox-tools rboor">
						<button type="button" class="btn bg-color-green txt-color-white p310" onclick="location.href='${base}/product/add'"><i class="fa fa-plus"></i> 创建</button>
                        <button id="editButton" type="button" class="btn bg-color-orange txt-color-white p310"><i class="fa fa-pencil"></i> 编辑</button>
						<button id="delButton" type="button" class="btn bg-color-red txt-color-white p310"><i class="fa fa-trash-o"></i> 删除</button>
                    </div>				   			   
                </div>
                
                <div class="ibox-content">
                	<!-- search star -->
                	<div class="form-horizontal clearfix">                		
	                     <div class="col-lg-4 col-sm-3 pl0">
		                     <div class="form-group">
		                           <div class="col-lg-8 col-sm-7">
		                                 <select class="input-sm form-control input-s-sm inline">
                                            <option value="0">请选择</option>
                                            <option value="1">冻结</option>
                                            <option value="2">开放</option>
                                            <option value="3">审核</option>
                                        </select>
		                           </div>
		                     </div>
	                     </div>
	                     <div class="col-lg-4 col-sm-5">
		                     <div class="form-group">
		                           <label class="col-lg-3  col-sm-3 control-label">日期：</label>
		                           <div class="col-lg-8 col-sm-8 input-group date">
		                           		<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
		                                 <input type="email" placeholder="2014-11-17" class="input-sm form-control">
		                                 <span class="input-group-addon">到</span>
		                                 <input type="text" class="input-sm form-control" name="end" value="" placeholder="2014-11-17">
		                           </div>
		                     </div>
	                     </div>
	                     <div class="col-lg-4 col-sm-4">
		                	<div class="form-group">
		                           <div class="col-lg-12 col-sm-12 input-group">
		                                 <input type="email" placeholder="请输入关键字" class="input-sm form-control">
		                                 <span class="input-group-btn">
                                        <button id="btnSearch" type="button" class="btn btn-sm  bg-color-green txt-color-white"><i class="fa fa-search-plus"></i> 搜索</button> </span>
		                           </div>
		                     </div>
	                     </div>
                     </div>
                     <!-- search end -->
                	<table id="example" class="table table-striped table-bordered table-hover dataTable no-footer" cellspacing="0" width="100%">
                		<thead>
							<tr>
								<th class="tn"><input id="checkAll" name="" type="checkbox" value=""></th>
								<th>产品编码</th>
								<th>产品名称</th>
								<!--<th>productCategory</th>-->
								<th>单价</th>
								<th>是否上架</th>
								<th>是否精品</th>
								<th>是否最新</th>
								<th>是否最热</th>
								<th>库存</th>
								<th>修改日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody></tbody>
                	  </table>
                </div>
                
			</div>
		</div>
	</div>
	
	
	<!-- table end -->
	<script type="text/javascript" src="${base}/ui/js/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/ui/js/admin/bootstrap.min.js"></script>
	<script type="text/javascript" src="${base}/ui/js/admin/jquery.dataTables.js"></script>
	<script type="text/javascript" src="${base}/ui/js/admin/dataTables.bootstrap.js"></script>
	<script type="text/javascript" src="${base}/ui/js/admin/colResizable-1.5.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			var table = $('#example').DataTable({
				"pagingType":   "full_numbers",
				"sLoadingRecords": "正在加载数据...",
				"sZeroRecords": "暂无数据",
				stateSave: true,
				"searching": false,
				"processing": true,
				"serverSide": true,
				"ajax": {
					"url": "/product/findProduct",
					"type": "POST"				
				},
				columns: [
					{ data: "id" ,"sWidth": "30px", sortable: false},
					{ data: "productSn","sWidth": "150px"},
					{ data: "name" ,"sWidth": "450px"},
					//{ "data": "productCategory" },
					{ data: "price","sWidth": "50px"},
					{ data: "isMarketable" ,sortable:false ,"sWidth": "50px"},
					{ data: "isBest" ,sortable: false ,"sWidth": "50px"},
					{ data: "isNew" ,sortable: false ,"sWidth": "50px"},
					{ data: "isHot" ,sortable: false ,"sWidth": "50px"},
					{ data: "store" ,"sWidth": "50px"},
					{ data: "modifyDate","sWidth": "150px"},
					{ data: "id" ,sortable: false }					
				],	
				columnDefs: [{
					//"visible": false,
					//"targets": 0
				},
				{				
					render: function(data, type, row) {
						return '<input name="checkList" type="checkbox" value='+ data +' >';
					},
					//指定是第1列
					targets: 0
				},
				{
					render: function(data, type, row) {
					//渲染 把数据源中的标题和url组成超链接
					return '<a class="btn btn-xs bg-color-orange txt-color-white" href="${base}/product/edit?id=' + data + '">' + '编辑' + '</a> | <a class="btn btn-xs bg-color-red txt-color-white" href="${base}/product/delete?ids=' + data + '">' + '删除' + '</a>';
					},
					//指定是第3列
					targets: 10				
				}],
				"dom": 'rt<"bottom"iflp<"clear">>',	
				"language": {
					"processing": "玩命加载中...",
					"lengthMenu": "显示 _MENU_ 项结果",
					"zeroRecords": "没有匹配结果",
					"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
					"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
					"infoFiltered": "(由 _MAX_ 项结果过滤)",
					"infoPostFix": "",
					"url": "",
					"paginate": {
						"first":    "首页",
						"previous": "上一页",
						"next":     "下一页",
						"last":     "末页"
					}
			   },
			   _fnPageChange:function(){
				alert("1111");
			   }
				
			});
			
			//单机行，选中复选框
			$("#example tr").slice(1).each(function(g){
				var p = this;
				$(this).children().slice(1).click(function(){
					$($(p).children()[0]).children().each(function(){
						if(this.type=="checkbox"){
							if(!this.checked){
								this.checked = true;
							}else{
								this.checked = false;
							}
						}
					});
				});
			});
			
			//checkbox全选
            $("#checkAll").on("click", function () {
               if ($(this).prop("checked") === true) {
                   $("input[name='checkList']").prop("checked", $(this).prop("checked"));
                   $('#datagrid tbody tr').addClass('selected');
               } else {
                   $("input[name='checkList']").prop("checked", false);
                   $('#datagrid tbody tr').removeClass('selected');
               }
            });
			
			$("#btnSearch").on("click", function () {
			
				alert('执行查询');
				
				table.fnReloadAjax( '/product/findProduct' );
				//刷新新的数据
				table.fnReloadAjax();
			});
			
			//使用col插件实现表格头宽度拖拽
			$(".table").colResizable();
			
			//在搜索，或者分页的时候，调用该方法
			//这里只做具体说明，没有做实际服务端数据测试
			//重新加载表格数据（同等于刷新）
			//添加fnReloadAjax  js引用
			//参考http://www.datatables.net/plug-ins/api/fnReloadAjax
			$("#tb-refresh").on("click",function(){
				//加载一个新的文件
				//fnReloadAjax方法有3个主要参数
				//1、oSettings=[类似jquery ajax的data:{id:2}]
				//2、sNewSource=加载数据的URL
				//3、回调函数fnCallback
				//table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
				//刷新新的数据
				//table.fnReloadAjax();
			});
			
			// 删除
			$('#delButton').click( function (data) {
				_deleteList();
			} );
			
			/**
			* 批量删除
			* 未做
			* @private
			*/
			function _deleteList() {
			var str = '';
			$("input[name='checkList']:checked").each(function (i, o) {
				str += $(this).val();
				str += ",";
			});
			if (str.length > 0) {
				var IDS = str.substr(0, str.length - 1);
				alert("你要删除的数据集id为" + IDS);
			} else {
				alert("至少选择一条记录操作");
			}
			}
			
		})		
		
			
	</script>

	</body>
</html>